//模块二：分页显示产品列表
/**
 * 分页显示产品列表 loadProductByPage()
 * @param $pno 当前页码
 * @param $pageSize 当前页记录条数
 */
//获取每页显示条数
    var pageSize=parseInt($("#page-size").val());
//页面初始化
    loadProductByPage(0,pageSize);
//绑定跳转事件
    $("#pagination").on("click","li a",function (e) {
        if(!$(this).parent().is(".disabled")){
            var pno=$(this).attr("data-id");
            var low=$("#price_low").val();
            var high=$("#price_high").val();
            var kw=$("#product-kw").val();
            loadProductByPage(pno,pageSize,low,high,kw);
        }
    })
    function loadProductByPage($pno,$pageSize) {
    //发送ajax请求获取当前页的内容
    $.ajax({
        type:"get",
        url:"./data/04_product_list.php",
        data:{pno:$pno,pageSize:$pageSize},
        success:function (data) {
            //创建产品列表
            create_product_list();
            //创建分页条
            create_pagination();
            function create_product_list(){
                var html="";
                $.each(data.rows, function(i, l){
                    html += "<tr "
                    if(l.expire==1){
                        html += ` class="expire">`;
                    }
                    html += `
                        >
                        <td><input type="checkbox"></td>
                        <td>${l.lid}</td>
                        <td><img class="pic" src="${l.sm}"></td>
                        <td><p class="fname" title="${l.name}">${l.name}</p></td>
                        <td><p class="title" title="${l.title}">${l.title}</p></td>
                        <td><p class="spec" title="${l.spec}">${l.spec}</p></td>
                        <td><p class="pprice">￥${l.price}</p></td>
                        <td style="display: none" class="category">${l.category}</td>
                        <td>`;
                    if(l.expire==0){
                        html += `    
                          <a href="#"  data-action="detail" data-id="${l.lid}">详情</a>
                          <a href="#"  data-action="update" data-id="${l.lid}">修改</a>
                          <a href="#"  data-action="delete" data-id="${l.lid}">删除</a>
                       `;
                    }
                    html += `    
                          </td>
                      </tr>
                    `;
                })
                $('#table-laptop tbody').html(html);
            }
            function create_pagination() {
                var html = '';
                html += `<li class="${data.nowPage<=1?'disabled':''}"><a data-id="${data.nowPage>1?data.nowPage-1:'#'}">上一页</a></li>`;
                if(data.nowPage-2>0){
                    html += `<li><a data-id="${data.nowPage-2}">${data.nowPage-2}</a></li>`;
                }
                if(data.nowPage-1>0){
                    html += `<li><a data-id="${data.nowPage-1}">${data.nowPage-1}</a></li>`;
                }
                html += `<li class="active"><a data-id="${data.nowPage}">${data.nowPage}</a></li>`;
                if(data.nowPage+1<data.pageCount){
                    html += `<li><a data-id="${data.nowPage+1}">${data.nowPage+1}</a></li>`;
                }
                if(data.nowPage+2<data.pageCount){
                    html += `<li><a data-id="${data.nowPage+2}">${data.nowPage+2}</a></li>`;
                }
                html += `<li class="${data.nowPage>=data.pageCount-1?'disabled':''}"><a data-id="${data.nowPage<data.pageCount?data.nowPage+1:'#'}">下一页</a></li>`;
                $('#pagination').html(html);
            }
        },error:function () {
            console.log('服务器繁忙！')
        }
    });
    //参数pno pageSizze
    //接收服务器返回数据 output["data"]=[....]
    //拼接字符串
    //如果当前产品已经实效，不再添加详细、修改、删除
    //创建分页条[1] [2] [3] [4]...
    //拼接计算
  }
//模块三：删除指定产品
    $("#table-laptop tbody").on("click","tr td a[data-action=delete]",function (e) {
        e.preventDefault();
        var data_id=$(this).attr("data-id");
        var This=$(this);
        if(confirm("是否删除该产品？")){
            //发送删除请求
            send_del();
        };
        function send_del(){
            $.ajax({
                type:"get",
                url:"data/05_product_del.php",
                data:{lid:data_id},
                success:function (data) {
                    if(data.code){
                        This.parent().parent().addClass("expire");
                        This.parent().html("");
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                },error:function () {
                    alert("服务器繁忙")
                }
            });
        }
    })
//模块四：更新产品价格
    update_price();
    function update_price() {
    var price;//当前行产品价格
    var lid;//当前行产品lid
    var thisRow;//当前操作行
    //触发更新对话框
    $("#table-laptop tbody").on("click","tr td a[data-action=update]",function (e) {
        e.preventDefault();
        var data_id=$(this).attr("data-id");
        var This=$(this);
        thisRow=This;
        price=This.parents("tr").find(".pprice").html().substr(1);
        lid=data_id;
        $(".update-jumbotron").show();
        var html=`  <h1>更新商品价格</h1>
        <div>
        <ul>
          <li>
        商品名称:<span class="pname">${This.parents("tr").find(".fname").html()}</span>
      </li>
        <li>
        商品价格:<input type="text" class="input-price" value="${price}"/> 
      </li>
      <li class="txt-btn">
          <a class="btn btn-primary btn-xs" data-action="update-ok" data-lid="${data_id}" href="#" role="button">更新</a>
          <a class="btn btn-primary btn-xs" data-action="update-cancel" href="#" role="button">取消</a>
        </li>
      </ul>`;
        $(".update-jumbotron").html(html);
    })
//取消更新
    $(".update-jumbotron").on("click","[data-action=update-cancel]",function () {
        $(".update-jumbotron").hide();
    })
//更新
    $(".update-jumbotron").on("click","[data-action=update-ok]",function () {
        price=$(this).parent().parent().find("li input.input-price").val();
        var This=$(this);
        $(".update-jumbotron").hide();
        $.ajax({
            type:"post",
            url:"./data/06_product_update.php",
            data:{lid:lid,price:price},
            success:function (data) {
                if(data.code){
                    thisRow.parents("tr").find(".pprice").html("￥"+price)
                }else{
                    alert(data.msg);
                }

            },
            error:function () {
                alert("服务器繁忙！");
            }
        });

    })
}
//模块五：显示产品详细信息
    showDetail();
    function showDetail() {
        $("#table-laptop tbody").on("click","tr td a[data-action=detail]",function (e) {
            e.preventDefault();
            var fname=$(this).parents("tr").find("p.fname").html();
            var category=$(this).parents("tr").find(".category").html();
            var pprice=$(this).parents("tr").find(".pprice").html();
            var spec=$(this).parents("tr").find("p.spec").html();
            var html=`  <h1>商品详细信息</h1>
                <ul>
                  <li>
                商品名称:<span class="pname">${fname}</span>
              </li>
              <li>
                商品类别:<span class="pcategory">${category}</span> 
              </li>
              <li>
                商品价格:<span class="pprice">${pprice}</span> 
              </li>
              <li>
                os:<span class="pos">${spec}</span> 
              </li>
              <li class="txt-btn">
                  <a class="btn btn-primary btn-xs" data-action="detail-cancel" href="#" role="button">关闭</a>
                </li>`;
            $(".detail-jumbotron").html(html);
            $(".detail-jumbotron").show();
        })
        $(".detail-jumbotron").on("click","[data-action=detail-cancel]",function (e){
            e.preventDefault();
            $(".detail-jumbotron").hide();
        })


    }

